<template>
  <!--  <commonformdialog :isshowDialogs="isshowDialog" :dialogTitle="dialogTitle" @closetextDialog="closeDialog" @confirmbtn="confirmbtn"
    :dialogWidth="'45%'" :topHeight='"10vh"'>

  </commonformdialog> -->
  <commonformdialog :isshowDialogs="isshowDialog" :dialogTitle="dialogTitle" @closetextDialog="closeDialog" @confirmbtn="confirmbtn"
    :dialogWidth="'50%'" :topHeight='"10vh"'>
    <div class="formarea">

      <el-form ref="form" size="medium" :rules="rules" :model="form" label-width="120px">

        <el-row>
          <el-col :span="12">
            <el-form-item label="模板标题" prop='title'>
              <el-input v-model="form.title" placeholder="请输入模板标题" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="模板内容" prop='content'>
              <el-input type="textarea" :rows="3" v-model="form.content" placeholder="请输入模板内容" clearable></el-input>
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>

    </div>
  </commonformdialog>
</template>

<script>
  import {getSessionStorage} from '@/utils/accessToken'
  import commonformdialog from '@/components/commondialog/commondialog'
  import Treeselect from "@riophae/vue-treeselect"; //下拉树组件
  //api
  import {
    commenttemplatecreate,
    commenttemplateupdate,
    commenttemplateread
  } from '@/api/course'
  export default {
    data() {
      return {
        form: {
          title: '',
          content: ''
        },
        showInput: false,
        textarea: '',
        replayId: null,
        treeOptions: [],
        rules: {
          title: [{
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          }, ],
          content: [{
            required: true,
            message: '请输入内容',
            trigger: 'blur'
          }, ],
        },
      }
    },
    components: {
      commonformdialog,
      Treeselect
    },
    props: {
      //是否显示弹窗
      isshowDialog: {
        type: Boolean,
        default: false,
        required: true,
      },
      //表单的名字
      dialogTitle: {
        type: String,
        default: '',
        required: true,
      },
      //是编辑还是新增
      formType: {
        type: Number,
        default: 0,
      },
      //

      // form:{
      //     type: Object,
      // }
    },
    methods: {
      normalizer(node) {
        return {
          id: node.id,
          label: node.title,
          children: node.children,
        }
      },
      confirmbtn() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            //新增
            if (this.formType == 0) {
              let params = {
                title: this.form.title,
                content: this.form.content
              }
              let data = await commenttemplatecreate(params)
              if (data.code == '0000') {
                this.$message({
                  type: 'success',
                  message: '新增成功'
                });
                this.$refs['form'].resetFields()
                this.$emit('confirmbtn')
              }
            } else {
              //编辑
              let params = {
                title: this.form.title,
                content: this.form.content,
                id: this.form.id
              }
              let data = await commenttemplateupdate(params)
              if (data.code == '0000') {
                this.$message({
                  type: 'success',
                  message:'修改成功'
                });
                this.$refs['form'].resetFields()
                this.$emit('confirmbtn')
              }
            }
          }

        });


      },

      closeDialog() {
        this.$refs['form'].resetFields()
        this.$emit('closedialog')
      },


    },
    mounted() {
      this.$bus.on('editreadform', async (val) => {
          
         let data = await commenttemplateread({ id: val.id })
          if(data.code=='0000'){
            this.form=data.data
          }

      })
      this.treeOptions = getSessionStorage('Optionsall').team
    },


  }
</script>

<style scoped lang='scss'>
  .content {
    .maincontent {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .headerImage {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .mainevaluation {
      margin-left: 1rem;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;

      .top {
        font-size: 12px;
        margin-bottom: .8rem;

        .evaluator {
          margin-right: 1rem;
          color: #379be9;
          font-weight: bold;
        }

        .time {
          color: #999;
        }
      }

      .bot {
        span {
          line-height: 24px;
        }

        font-size: 14px;
      }
    }

    .replyArea {
      margin-left: 4.5rem;
      padding: 1rem;
      background-color: #f7f7f7;
      font-size: 14px;
      margin-top: 1rem;

      .replayItem {
        margin-bottom: 1rem;

      }

      .top {
        color: #4b4b4b;
        line-height: 24px;

        .name {
          font-weight: bold;
        }
      }

      .bot {
        margin-top: .6rem;
        margin-bottom: 1rem;
        color: #adadad;
        font-size: 12px;

        .huifu {
          margin-right: .5rem;
          cursor: pointer;
        }

        .addColor {
          color: #379be9;
        }
      }

      .inputBox {
        margin: 0.01rem;

        .replayBtn {
          margin-top: .5rem;
        }
      }
    }
  }
</style>
